<!-- 导航栏 -->
<script lang="ts" setup>
import { ref } from "vue" 

</script>

<template>
 <div class="bg-white p-4 flex justify-between items-center">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">编辑器</el-breadcrumb-item>
    <el-breadcrumb-item>富文本编辑器</el-breadcrumb-item>
  
  </el-breadcrumb>
  <div class="flex items-center justify-center relative group">
    <img src="/public/images/home.jpg" alt="头像" class="w-8 h-8 rounded-full object-cover">
    <span class="text-sm text-gray-600 ml-1">uncleTom</span>
    <section class="absolute top-full bg-white  rounded-md whitespace-normal p-3  shadow-sm group-hover:block hidden">
      <div class="flex items-center cursor-pointer py-2 border-b">
        <a class="iconfont icon-arrowRight-copy " style="font-size: 12px;"></a>
      <span class="text-xs text-gray-600 ml-2">文档资料</span>
      </div>
      <div class="flex items-center cursor-pointer py-2 border-b">
        <a class="iconfont icon-arrowRight-copy " style="font-size: 12px;"></a>
      <span class="text-xs text-gray-600 ml-2">用户管理</span>
      </div>
      <div class="flex items-center cursor-pointer py-2 border-b">
        <a class="iconfont icon-arrowRight-copy " style="font-size: 12px;"></a>
      <span class="text-xs text-gray-600 ml-2">会员中心</span>
      </div>
    </section>
   
  </div>

 </div>
</template>

<style lang="scss" scoped>

</style> 